<template>
  <view class="container">
    <view class="header">
      <text class="title">沙扒湾文化</text>
      <view class="search-box">
        <image src="/static/搜索.png" class="search-icon"></image>
        <input type="text" placeholder="搜索文化内容" confirm-type="search" v-model="searchText" @confirm="searchCulture" />
      </view>
    </view>
    
    <!-- 分类标签 -->
    <view class="category-filter">
      <view class="filter-item" :class="{'active': currentCategory === 'all'}" @click="filterByCategory('all')">
        全部
      </view>
      <view class="filter-item" :class="{'active': currentCategory === 'history'}" @click="filterByCategory('history')">
        历史文化
      </view>
      <view class="filter-item" :class="{'active': currentCategory === 'folk'}" @click="filterByCategory('folk')">
        民俗风情
      </view>
      <view class="filter-item" :class="{'active': currentCategory === 'art'}" @click="filterByCategory('art')">
        艺术传承
      </view>
      <view class="filter-item" :class="{'active': currentCategory === 'festival'}" @click="filterByCategory('festival')">
        节庆活动
      </view>
    </view>
    
    <!-- 文化列表 -->
    <view class="culture-list">
      <view class="culture-card" v-for="(item, index) in cultureList" :key="item._animKey || item.id" 
            :class="['card-anim']" 
            :style="{animationDelay: index * 0.05 + 's'}"
            @click="goToDetail(item.id)">
        <image class="culture-image" :src="item.coverImage" mode="aspectFill"></image>
        <view class="culture-info">
          <text class="culture-title">{{item.title}}</text>
          <view class="culture-tags">
            <text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
          </view>
          <text class="culture-desc">{{item.description}}</text>
          <view class="culture-meta">
            <text class="view-count">{{item.viewCount}} 浏览</text>
            <text class="like-count">{{item.likeCount}} 点赞</text>
          </view>
        </view>
      </view>
      
      <view class="empty-tips" v-if="cultureList.length === 0 && !isFiltering">
        暂无{{getCategoryName(currentCategory)}}数据
      </view>
    </view>
  </view>
</template>

<script>
// 静态文化数据
const staticCulture = [
  {
    id: '1',
    title: '沙扒湾渔村文化',
    coverImage: '/static/图片.jpg',
    tags: ['历史文化', '渔村', '传统'],
    description: '沙扒湾渔村有着悠久的渔业文化传统，世代以海为生的渔民们创造了独特的生活方式和文化习俗。',
    viewCount: 1280,
    likeCount: 368,
    type: 'history',
    content: '详细介绍沙扒湾渔村的历史变迁、渔业发展、民俗文化等。'
  },
  {
    id: '2',
    title: '沙扒湾渔民节',
    coverImage: '/static/图片.jpg',
    tags: ['节庆活动', '民俗', '祭海'],
    description: '每年农历三月初三的渔民节是沙扒湾最重要的传统节日，渔民们会举行隆重的祭海仪式。',
    viewCount: 956,
    likeCount: 245,
    type: 'festival',
    content: '详细介绍渔民节的由来、仪式流程、现代传承等内容。'
  },
  {
    id: '3',
    title: '沙扒湾民间艺术',
    coverImage: '/static/图片.jpg',
    tags: ['艺术传承', '手工艺', '民间艺术'],
    description: '沙扒湾流传着独特的渔民手工艺，包括编织渔网、制作渔具、贝壳工艺等。',
    viewCount: 845,
    likeCount: 198,
    type: 'art',
    content: '介绍沙扒湾特色手工艺的制作工艺、艺术特色和传承现状。'
  },
  {
    id: '4',
    title: '沙扒湾民俗风情',
    coverImage: '/static/图片.jpg',
    tags: ['民俗风情', '生活习俗', '地方特色'],
    description: '沙扒湾独特的地理位置和历史传统，形成了特色鲜明的民俗文化。',
    viewCount: 765,
    likeCount: 187,
    type: 'folk',
    content: '详细介绍沙扒湾的民间习俗、节日庆典、生活方式等。'
  }
];

export default {
  data() {
    return {
      searchText: '',
      cultureList: [],
      allCulture: staticCulture,
      currentCategory: 'all',
      isFiltering: false
    }
  },
  onLoad() {
    // 设置筛选状态
    this.isFiltering = true;
    
    // 准备数据
    let initialData = JSON.parse(JSON.stringify(staticCulture));
    
    // 为列表项设置动画key
    initialData.forEach((item, index) => {
      item._animKey = Date.now() + index;
    });
    
    // 设置初始数据
    this.cultureList = initialData;
    
    // 完成筛选状态
    this.isFiltering = false;
  },
  methods: {
    // 根据分类筛选
    filterByCategory(category) {
      if (this.currentCategory === category) return;
      
      this.currentCategory = category;
      this.isFiltering = true;
      
      let newCulture = [];
      
      if (category === 'all') {
        newCulture = JSON.parse(JSON.stringify(staticCulture));
      } else {
        newCulture = JSON.parse(JSON.stringify(
          staticCulture.filter(item => item.type === category)
        ));
      }
      
      // 为新列表项设置独特的key
      newCulture.forEach((item, index) => {
        item._animKey = Date.now() + index;
      });
      
      this.cultureList = newCulture;
      this.isFiltering = false;
    },
    
    // 搜索文化内容
    searchCulture() {
      if (!this.searchText.trim()) {
        this.filterByCategory(this.currentCategory);
        return;
      }
      
      const keyword = this.searchText.toLowerCase();
      this.isFiltering = true;
      
      let searchSource = this.currentCategory === 'all' 
        ? staticCulture 
        : staticCulture.filter(item => item.type === this.currentCategory);
      
      let newCulture = searchSource.filter(item => 
        item.title.toLowerCase().includes(keyword) || 
        item.description.toLowerCase().includes(keyword) ||
        (item.tags && item.tags.some(tag => tag.toLowerCase().includes(keyword)))
      );
      
      newCulture.forEach((item, index) => {
        item._animKey = Date.now() + index;
      });
      
      this.cultureList = newCulture;
      this.isFiltering = false;
      
      if (this.cultureList.length === 0) {
        uni.showToast({
          title: '未找到相关数据',
          icon: 'none'
        });
      }
    },
    
    // 跳转到详情页
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/culture/detail?id=${id}`
      });
    },
    
    // 获取分类名称
    getCategoryName(category) {
      switch(category) {
        case 'all': return '文化';
        case 'history': return '历史文化';
        case 'folk': return '民俗风情';
        case 'art': return '艺术传承';
        case 'festival': return '节庆活动';
        default: return '数据';
      }
    }
  },
  onShareAppMessage() {
    return {
      title: '沙扒湾文化特色',
      path: '/pages/culture/index'
    }
  },
  onPullDownRefresh() {
    if (this.searchText) {
      this.searchCulture();
    } else {
      this.filterByCategory(this.currentCategory);
    }
    
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  }
}
</script>

<style>
.container {
  padding: 0 30rpx;
}

.header {
  padding: 30rpx 0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 15rpx 25rpx;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.search-box input {
  flex: 1;
  height: 40rpx;
  font-size: 28rpx;
}

.category-filter {
  display: flex;
  overflow-x: auto;
  background-color: #fff;
  margin: 0 -30rpx 20rpx;
  padding: 20rpx 30rpx;
  white-space: nowrap;
}

.filter-item {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  transition: all 0.3s ease;
}

.filter-item.active {
  background-color: #1296db;
  color: #fff;
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 8rpx rgba(18, 150, 219, 0.2);
}

.culture-list {
  padding-bottom: 30rpx;
}

.culture-card {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.culture-image {
  width: 100%;
  height: 300rpx;
}

.culture-info {
  padding: 20rpx;
}

.culture-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.culture-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15rpx;
}

.tag {
  font-size: 24rpx;
  color: #1296db;
  background-color: rgba(18, 150, 219, 0.1);
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  margin-right: 12rpx;
  margin-bottom: 8rpx;
}

.culture-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.culture-meta {
  display: flex;
  justify-content: flex-end;
  font-size: 24rpx;
  color: #999;
}

.view-count, .like-count {
  margin-left: 20rpx;
}

.empty-tips {
  text-align: center;
  color: #999;
  padding: 60rpx 0;
  font-size: 28rpx;
}
</style> 